<template>
  <div id="data-table-large" class="data-table-zoom" v-show="enlargeTable">
    <div class="title">
      <!-- <span>快速汇总</span> -->
      <i class="close el-icon-close" @click="closeInfoWin"></i>
    </div>
    <div class="nav" style="padding:0 10px;">
      <el-row>
        <el-col :span="12">
          <el-select
            class="pos"
            v-model="num_codes"
            multiple
            collapse-tags
            popper-class="idenNumSelectPopper"
            size="small" @change="getSearchSum">
            <el-option
              v-for="item in numData"
              :key="item.idenCode"
              :label="item.idenName"
              :value="item.idenCode"
            ></el-option>
          </el-select>

          <el-select class="pos" style="margin-left:10px;" v-model="changeNum" size="small" @change="getSearchSum">
            <el-option
              v-for="item in iden_enu_data"
              :key="item.idenCode"
              :label="item.idenName"
              :value="item.idenCode"
            ></el-option>
          </el-select>
          <el-button size="small" @click="exportTable">导出</el-button>
        </el-col>
      </el-row>
    </div>
        <div class="table-container" >
        <vxe-grid
          ref="xveTableEnLarge"
          border='full'
          :stripe="true"
          :resizable="false"
          :auto-resize="false"
          :column-min-width="100"
          height="95%"
          highlight-hover-row
          highlight-current-row
          size="mini"
          align="center"
          :columns="queryTableData.tableLegend"
          :data="queryTableData.tableData"
          @cell-dblclick="updateRegion"
        ></vxe-grid>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { mapState, mapMutations } from "vuex";
import microConfig from "static/config/micro.js";
import axios from "axios";
import * as microAPI from "@/pages/micro/api/micro.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)
// 给 vue 实例挂载全局窗口对象
Vue.prototype.$XModal = VXETable.modal


import XLSX from 'XLSX'

export default {
  name: "EnlargeTable",
  data(){
      return {
        TableHeight:"90%",
        target:1,
        num_codes:[],
        echartsData:{},
        queryTableData:{
          tableLegend:[
            {name:'区划',value:'NAME'},
            { name: "总计", value: "NAME" }
          ],
          tableData:[],
          tableName:''
        },
        tableWidth:"330",
        changeEchartsStyle:false,
        echartsStyle:'pie',
        tableVisible:false,
        tableData: [

        ],
        changeNum:'all',
        numData:[
          {idenCode:"COUNT",idenName:"单位数量"}
        ],
        myChart: null,

        iden_enu_data: [//所以枚举指标和对应的全部数据
          {idenName:"全部",idenCode:"all"}
        ], //枚举数据
        selected:{//选中的数字指标和枚举指标
            iden_num_codes: "COUNT", //数字指标
            iden_num_arr:[],//选中的数字指标
            iden_enu_code:"B0010031",//枚举指标
            iden_enu_index:0//选中的枚举指标索引
        },
        iden_num_codes:[],//所有的数字指标
        selectedSearchParams:{},
        selectedSearchData:{},
        maplevel:3,
        // isZoom:false,
        doZoom:false,//默认不是区划变更
        loading:false,//加载动画
        map: {
          currentZoom: 4 //地图当前等级
        }, //当前地图
        region:{//区划参数
          rcid:'',//区划版本
        }
      }
  },
  beforeCreate(){

  },
  computed: {
    ...mapState({
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showQueryTableLayer: state => state.micro.showQueryTableLayer,
      showTypeTabLayer: state => state.micro.showTypeTabLayer,
      queryTable: state => state.micro.queryTable,
      enlargeChart: state => state.micro.enlargeChart,
      showMapControl: state => state.micro.showMapControl,
      showEchartsLayer: state => state.micro.showEchartsLayer,
      showMapTableLayer: state => state.micro.showMapTableLayer,
      enlargeTable: state => state.micro.enlargeTable,
    })
  },
  mounted(){
    EventBus.$on("refreshBoundaryFeaturesComplete",()=>{
      setTimeout(()=>{
        this.doZoom = false;
        const map = sgisMapBase.getMap();
        let zoom = Math.round(map.getZoom());
        this.map.currentZoom = zoom;//重置地图等级
      },microConfig.openZoomEndTime)
    })
    EventBus.$on("updateMicroSearch", (microSearchParams,selectedSearchParams)=>{
      this.doZoom = true;
      this.region.rcid = selectedSearchParams.regions.rcid;
      this.selectedSearchParams=selectedSearchParams;
      if(selectedSearchParams.regions.regionArr.length > 1){
        this.maplevel = selectedSearchParams.regions.regionArr[0].regionLevel
      }
      if(selectedSearchParams.regions.regionArr.length == 1){
        this.maplevel = selectedSearchParams.regions.regionArr[0].regionLevel + 1
      }
      if(this.selectedSearchParams.regions.regionArr.length){
        this.queryTableData.tableData=[]
        this.selectedSearchParams.regions.regionArr.map(item=>{
          let dataItem = {"区划":item.regionName}
          this.queryTableData.tableData.push(dataItem)
          return item
        })
      }
      this.init();
    });
    EventBus.$on("updateMicroSearchItem", (microSearchParams,selectedSearchParams)=>{
      this.region.rcid = selectedSearchParams.regions.rcid;
      this.selectedSearchParams=selectedSearchParams
      if(selectedSearchParams.regions.regionArr.length > 1){
        this.maplevel = selectedSearchParams.regions.regionArr[0].regionLevel
      }
      if(selectedSearchParams.regions.regionArr.length == 1){
        this.maplevel = +selectedSearchParams.regions.regionArr[0].regionLevel + 1
      }
      if(this.selectedSearchParams.regions.regionArr.length){
        this.queryTableData.tableData=[]
        this.selectedSearchParams.regions.regionArr.map(item=>{
          let dataItem = {"区划":item.regionName}
          this.queryTableData.tableData.push(dataItem)
          return item
        })
      }
      this.init();
    })
    EventBus.$on("clearMicroAllChart",()=>{
      this.num_codes=[];
      this.numData=[],
      this.queryTableData={
          tableLegend:[
            {name:'区划',value:'NAME'}
          ],
          tableData:[],
          tableName:''
        },
      this.changeNum = ""
      this.iden_enu_data = []
    });
    EventBus.$on("tableMainCodes",(num_codes,changeNum)=>{
      this.num_codes = num_codes;
      this.changeNum = changeNum;
      this.getSearchSum();
    })
  },
  beforeDestroy(){
    EventBus.$off("updateMicroSearch");
    EventBus.$off("updateMicroSearchItem");
    EventBus.$off("clearMicroAllChart");
  },
  methods:{
    ...mapMutations(["changeEnlargeTable","changeEnlargeChart","changeShowEchartsLayer","changeShowMapTableLayer","changeShowMapControl","changequeryTableData","changeShowFastCollectLayer", "changeShowTypeTabLayer","changeShowTableLayer","changeShowQueryTableLayer"]),
    exportTable(){
        // 转换数据
        let table = this.$refs.xveTableEnLarge.$el.querySelector('#data-table-large .vxe-table--main-wrapper')
        let book = XLSX.utils.book_new()
        let sheet = XLSX.utils.table_to_sheet(table)
        XLSX.utils.book_append_sheet(book, sheet)
        let wbout = XLSX.write(book, { bookType: 'xlsx', bookSST: false, type: 'binary' })
        let blob = new Blob([this.toBuffer(wbout)], { type: 'application/octet-stream' })
        // 保存导出
        this.openDownloadDialog(blob, '基层查询数据.xlsx')
    },
    openDownloadDialog(url, saveName) {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent('click');
        else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    },
    toBuffer (wbout) {
      let buf = new ArrayBuffer(wbout.length)
      let view = new Uint8Array(buf)
      for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xFF
      return buf
    },
    labelHead(h, { column, $index }) {
      let l = column.label.length + 2;
      let f = 16;
      column.minWidth = f * l;
      if(this.queryTableData.tableLegend.length>=6 || column.realWidth>300){
        column.realWidth = column.minWidth
      }
      return h("div",  [
        column.label
      ]);
    },
    init() {
      // this.doZoom = false;
      this.changeNum = "";
      this.num_codes=[];
      this.numData=[
        {idenCode:"COUNT",idenName:"单位数量"}
      ],
      this.queryTableData.tableLegend = [
          {name:'区划',value:'NAME'}
          ,{name: "总计", value: "NAME"}
        ]
      if(this.selectedSearchParams.hasOwnProperty("microid")){
        this.getMicroIden();
      }
      this.iden_enu_data = []
    },
    //查询基层指标
    getMicroIden() {
      let that = this;
      let req = {
        miid: that.selectedSearchParams.microid,
        iden_type: ""
      };
      microAPI
        .getSelectedTableIden(req)
        .then(res => {
          if (res.message == "success" && res.data.length > 0) {
            that.iden_enu_data = [{idenName:"总量",idenCode:"all"}]
            that.iden_num_codes = []
            that.numData = [
              {idenCode:"COUNT",idenName:"单位数量"}
            ],
            that.selected = {//选中的数字指标和枚举指标
              iden_num_codes: "COUNT", //数字指标
              iden_num_arr:[],//选中数字指标具体信息
              iden_enu_code:"B0010031",//枚举指标
              iden_enu_index:0//选中的枚举指标索引
            }
            let data = res.data;
            for (let i in data) {
              if (data[i].idenType == 2) {
                //数字指标
                that.iden_num_codes.push(data[i].idenCode);
                that.numData.push(data[i])
              }
              if (data[i].idenType == 4) {
                data[i].data = [];
                that.iden_enu_data.push(data[i]);
              }
            }
            that.selectedSearchData.numData = that.numData
            that.selectedSearchData.iden_enu_data = that.iden_enu_data
            that.num_codes = [];
            that.num_codes.push(that.numData[0].idenCode,that.numData[1].idenCode)//默认选中两个数字指标
            that.changeNum = that.iden_enu_data[0].idenCode
            that.getSearchSum();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getSearchSum() {
      if(this.numData.length){
        let that = this;
        this.loading = true;
        let iden_enu_code = [];
        let iden_num_codes = JSON.parse(JSON.stringify(that.num_codes));
        if(that.changeNum == "all" || that.changeNum == ""){
          iden_enu_code=[]
        }else{
          iden_enu_code.push(that.changeNum)
        }
        if(iden_num_codes.indexOf("COUNT")!=-1){
          let index = iden_num_codes.indexOf("COUNT");
          iden_num_codes.splice(index,1);
        }
        let req = {
          conditions:that.selectedSearchParams.conditions,
          iden_enu_code:iden_enu_code,
          iden_num_codes:iden_num_codes,
          isRegion:that.changeNum == "all"?"true":"both",
          microId:that.selectedSearchParams.microid,
          msConditions:that.selectedSearchParams.msConditions||[],
          periods:that.selectedSearchParams.periods,
          rcid:that.selectedSearchParams.regions.rcid,
          regions:that.selectedSearchParams.regions.regionArr,
          subRegionLevel:that.maplevel >= 7 ? 7 : that.maplevel
        };
        that.querySum(req,function(data){
          that.getRowSum(function(){
            that.queryTableData.tableData = that.queryTableData.tableData.slice(0)
            that.selectedSearchData.data = data
            that.numData.map(item=>{
              if(item.idenCode == that.num_codes){
                that.queryTableData.num_codes = item.idenName
              }
            })
            that.queryTableData.changeNum = that.changeNum;
            that.getSumData(that.queryTableData,function(sumData){
              that.queryTableData = sumData;
               let queryTableDataStr = JSON.stringify(that.queryTableData);
                let queryTableDataObj = JSON.parse(queryTableDataStr);
                let obj = {
                tableData:queryTableDataObj,
                iden_num_arr:that.selected.iden_num_arr
                }
                EventBus.$emit("changeMainData", obj);
            });


             setTimeout(()=>{
              that.setTableHeaderWidth()
              that.queryTableData.tableLegend = that.queryTableData.tableLegend.slice(0)
            },300)

          })

        })
      }
    },
    //快速汇总查询
    querySum(req, callback) {
      let that = this;
      axios({
        url: microConfig.summarySearch,
        method: "post",
        params: {
          microId: req.microId
        },
        data: req
      })
        .then(function(response) {
          if (response.data.message == "success") {
            let data = response.data.data;
            let arr = JSON.parse(JSON.stringify(response.data.data));
            //表格数据初始化
            that.queryTableData.tableLegend = [
              { name:"区划", title: "区划",field: "区划", value: "NAME" }
            ];
            that.queryTableData.tableData = [];
            if (data.length > 0) {
              let mapName = [];
              data.map(item => {
                mapName.push(item.NAME);
                return item;
              });
              var newMapName = mapName.filter(function(value, index, self) {
                return self.indexOf(value) === index;
              });
              newMapName.map(item => {
                let dataItem = { 区划: item };
                that.queryTableData.tableData.push(dataItem);
                return item;
              });
            }
          
            that.selected.iden_num_arr = [];
            that.numData.map(num => {//保存选中数字指标
              that.num_codes.map(numcode=>{
                if(num.idenCode==numcode){
                  that.selected.iden_num_arr.push({
                    name:num.idenName,
                    value: num.idenCode
                  })
                }
              })
            });
           
            let tableData = that.queryTableData.tableData;
            //表格赋值
            if (that.changeNum == "all") {//总量分组
              that.numData.map(num => {
                that.num_codes.map(numcode=>{
                  if(num.idenCode==numcode){
                    that.queryTableData.tableLegend.push({
                      name:num.idenName,
                      title:num.idenName,
                      field:num.idenName,
                      value: num.idenCode
                    })
                  }
                })
              });

              tableData.map(item => {
                data.map(ite => {
                  if (ite.NAME == item["区划"]) {
                    item.region = {
                      regionname:ite.NAME,
                      regioncode:ite.CODE,
                      id:'',
                      rcid:that.region.rcid
                    }
                    that.selected.iden_num_arr.map(code=>{
                      item[code.name] = ite[code.value];
                    })
                    that.selected.iden_num_arr.map(code=>{
                      if (!item[code.name]) {
                        item[code.name] = "-";
                      }
                    })
                  }
                  return ite;
                });
                return item;
              });
             
              callback(data);
            } else {//非总量分组的表头格式：指标-分组值
              that.getTableHeader(function(){
                if (tableData.length) {
                  tableData.map(item => {
                    if (data.length) {
                      data.map(ite => {
                        if (ite.NAME == item["区划"]) {
                          item.region = {
                            regionname:ite.NAME,
                            regioncode:ite.CODE,
                            id:'',
                            rcid:that.region.rcid
                          }
                          that.queryTableData.tableLegend.map(header=>{
                            if(header.hasOwnProperty("numcode")){//和头部数字指标匹配
                              let children = header.children;
                              children.map((headchild)=>{
                                if(ite.ACODE ==headchild.idenCode){//和头部分组代码匹配
                                  item[headchild.name] = (ite[header.numcode]!=null&&ite[header.numcode]!="")?ite[header.numcode]:'-'
                                }
                              })
                               
                            }
                          });
                        }
                        return ite;
                      });

                    }
                    return item;
                  });
                }
                callback(data);
              });
            }
            that.zoomendfunc();

          } else {
            that.$message({
              message: response.data.message,
              type: "error"
            });
            return;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //计算行总计
    getRowSum(callback){
      let that = this;
      let table = that.queryTableData.tableData;
      for(let i in table){
        let obj = table[i];
        for(let k in that.selected.iden_num_arr){//分数字指标总计
          let numName = that.selected.iden_num_arr[k].name;
          let sum = 0; 
          for(let j in obj){
            if(j.indexOf(numName)!=-1&&typeof Number(obj[j]) === 'number' && !isNaN(Number(obj[j]))){
              sum+=Number(obj[j]);
            }
          }
          table[i][numName+"-总计"] = sum;
        }
      }
      that.queryTableData.tableData = table;
      callback();
    },
    //计算列总计数据
    getSumData(obj,callback){
      let tableLegend = obj.tableLegend;
      let tableData = obj.tableData;
      let sumobj = {
        "区划":"总计"
      };
      for(let i in tableLegend){
        if(tableLegend[i].hasOwnProperty("children")){//非总量分组
          let childLegend = tableLegend[i].children;
          childLegend.map((item)=>{
            let per = item.name;
            let itemSum = 0;
            for(let j in tableData){
              let value = tableData[j][per];
              if(value!=""&&value!="-"&&typeof Number(value) === 'number'&& !isNaN(Number(value)) ){
                itemSum += Number(value);
              }
            }
            sumobj[per]=itemSum;
          });
        }else if(tableLegend[i].name!="区划"&&!tableLegend[i].hasOwnProperty("children")){//总量分组
          let per = tableLegend[i].name;
          let itemSum = 0;
          for(let j in tableData){
            let value = tableData[j][per];
            if(value!=""&&value!="-"&&typeof Number(value) === 'number'&& !isNaN(Number(value)) ){
              itemSum += Number(value);
            }
          }
          sumobj[per]=itemSum;
        }
      }
      obj.tableData.unshift(sumobj)
      callback(obj);
    },
     //监听地图缩放
    zoomendfunc(){
      let that = this;
      const map = sgisMapBase.getMap();
      let _zoom ;
      map.off("zoomend").on("zoomend", function(){
        if(map.clusterLayerDBclick){
          map.off("zoomend");
          return;
        }
        _zoom = Math.round(map.getZoom());
        if(!that.doZoom){
           if(that.map.currentZoom == _zoom){
            return;
          }else{
            const maplevel = _zoom;
            let parentsRegion = sgisRegionBase.regionUtils.getRegionCodeByLevelAndCode(
              that.selectedSearchParams.regions.regionArr[0].regionCode,
              maplevel
            );
            let newpylevel = parentsRegion.level + 1;
            if(that.maplevel != newpylevel&&!(newpylevel<that.selectedSearchParams.regions.regionArr[0].regionLevel)){
              that.maplevel = newpylevel;
              // if(that.selectedSearchParams.regions.regionArr[0].regionLevel == that.maplevel){
              //   that.maplevel += 1
              // }
              if(!that.doZoom){
                that.getSearchSum()
              }
            }
            that.map.currentZoom = _zoom;//重置地图等级
          }
        }
      });
    },
    //获取非总量分组表头数据
    getTableHeader(callback) {
      let that = this;
      let req = {};
      if (that.iden_enu_data.length) {
        that.iden_enu_data.map(item => {
          if (item.idenCode === that.changeNum) {
            req = {
              mid: item.identid,
              vid: item.identVersion
            };
          }
          return item;
        });
      }
      if(req.hasOwnProperty("mid")&&req.hasOwnProperty("vid")){
        microAPI.selectRoot(req).then(res => {
          if (res.message == "success") {
            let arr = res.data;
            that.queryTableData.tableLegend = [
              { name:"区划" ,title: "区划",field:"区划", value: "NAME" }
            ];
            if (arr.length) {
              that.selected.iden_num_arr.map(numitem =>{
                let numDataObj = {//每一大类分组数据可进行总计
                  name:numitem.name,
                  title:numitem.name,
                  children: [{
                    name:numitem.name+'-总计', 
                    title: "总计", 
                    field:numitem.name+'-总计', 
                    value:"SUM",
                    numcode:numitem.value,//数字code
                  }],
                  numcode:numitem.value,//数字code
                }
                arr.map(item => {
                  let headerItem = { 
                    name:numitem.name+'-'+item.name, 
                    title: item.name, 
                    field:numitem.name+'-'+item.name, 
                    value:numitem.value+'-'+item.code,
                    numcode:numitem.value,//数字code
                    idenCode:item.code//分组code
                  };
                  numDataObj.children.push(headerItem)
                })
                that.queryTableData.tableLegend.push(numDataObj);
              });
            }
            callback();
          }
          that.setTableHeaderWidth();
        });
      }
    },
    //设置表头宽度
    setTableHeaderWidth() {
      let tableWidth = 0;
      this.queryTableData.tableLegend.map(item => {
        if(!item.hasOwnProperty("children")){//没有子层
          let width = (item.title.length + 2) * 16;
          let tableData = JSON.parse(JSON.stringify(this.queryTableData.tableData));
          tableData.map(ite => {
            if (ite[item.title]) {
              let iteWidth = ((ite[item.title]).toString().length + 2) * 16;
              if (iteWidth > width) {
                width = iteWidth;
              }
            }
          });
          item.width = width.toString();
          tableWidth += Number(item.width);
          return item;
        }else{//多分组
          let childHead = item.children;
          childHead.map((childItem)=>{//针对每一种分组值求宽度
            let tableData = JSON.parse(JSON.stringify(this.queryTableData.tableData));
            let width = (childItem.title.length + 2) * 16;
            tableData.map(ite => {
              if (ite[childItem.name]) {
                let iteWidth = ((ite[childItem.name]).toString().length + 2) * 16;
                if (iteWidth > width) {
                  width = iteWidth;
                }
              }
            });
            childItem.width = width.toString();
          })
          tableWidth += Number(item.width);
          return item;
        }
      });
      this.tableWidth = (tableWidth + 20).toString();
    },
    closeInfoWin() {
      this.$store.commit("changeEnlargeTable",false);
      this.$store.commit("changeShowMapControl", true);
      this.$store.commit("changeShowMapTableLayer", true);
      this.$store.commit("changeShowEchartsLayer", true);
      EventBus.$emit("tableCode", this.num_codes,this.changeNum);
    },
    changeSize(){
      EventBus.$emit("currentChartType", this.echartsStyle);
      this.$store.commit("changeEnlargeChart", false);
      this.$store.commit("changeEnlargeTable", true);
      this.$store.commit("changeShowMapControl", false);
      this.$store.commit("changeShowMapTableLayer", false);
      this.$store.commit("changeShowEchartsLayer", false);
    },
    //双击更新区划下钻
    updateRegion({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }){
      let updateRegion = [row.region];
      EventBus.$emit("changeToolRegion", updateRegion);
    },
  }

};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../css/rule.scss";

.data-table-zoom {
  background: rgba(23, 128, 154, 0.9) !important;
  height: 100%;
  font-size: 1.4rem;
  z-index: 1000;
  background: rgba(23, 128, 154, 0.9);
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  .table-container{
    height: 90%;
    box-sizing: border-box;
    padding: 10px;
    }
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    color:$fontColorW;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .close {
      float: right;
      line-height: 35px;
      margin-right: 8px;
      cursor: pointer;
      color:#fff;
    }
  }
  .el-table{
    max-width: inherit;
    width: inherit;
    min-width: 100%;
  }
  .nav {
    height: 45px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    .pos {
      float: left;
      line-height: 45px;
    }
    button{
        background: none;
        color: $fontColorW;
        border: 1px solid #dcdfe63d;
        margin-left: 10px;
        margin-top: 5px;
        height: 32px;
    }
  }
  .table-content {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    .table-data {
      position: absolute;
      min-width: 100%;
      height:100%;
    }
  }

}
</style>
<style rel="stylesheet/scss" lang="scss" >
@import "../../css/rule.scss";
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row > td,
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: rgba(255,138,61,.7);
  color: $fontColorW;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255,138,61,.7);
  color: $fontColorW;
}
.table-head {
  font-size: 1.4rem !important;
  line-height: 25px !important;
  display: flex !important;
}
// ::-webkit-scrollbar {
//   /*滚动条整体样式*/
//   width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
//   height: 10px;
// }
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #107089 !important;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // background: #ffffff;
}

.data-table-zoom{
  .el-loading-mask{
    .el-loading-spinner{
      i,p{
        color:$fontColorLimit;
      }
    }
  }
  .el-table__empty-block{
    width: 100%!important;
  }
  .el-table__body-wrapper{
    // overflow-x: hidden;
    height: 95%!important;
    max-width: 100%;
    width: auto;
    display: inline-block;
    table{
      tr{
        background: none;
      }
      tr:nth-child(odd){
        background: #2d98b3;
      }

    }
  }
  .el-table__header,.el-table__body{
    min-width: 150px;
    // width: 100% !important;
    // table-layout: auto !important;
  }
  .el-input--small .el-input__inner{
    background: #17809A !important;
    color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.1);
  }
  .el-table th,.el-table td,
  .el-table--striped .el-table__body tr.el-table__row--striped td{
    background:rgba(23,128,154,0.8);
    color:rgba(255,255,255,.6);
  }
  .el-table{
    background-color:transparent;
  }
  .el-table th, .el-table tr{
    background-color:transparent;
  }
  .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
    border-color: rgba(255,255,255,.1);
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: rgba(255,255,255,.1);
  }
  .el-table__empty-text{
    color:rgba(255,255,255,.6);
  }
  .el-table--border th.gutter:last-of-type{
    border-bottom: 1px solid rgba(255,255,255,.1)
  }
}

.el-select-dropdown{
  background-color: rgba(23,128,154,0.8);
  border-color: rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color: rgba(23,128,154,0.8);
  top:0;
  // border-color: rgba(23,128,154,0.8);
}
.el-select-dropdown__item{
  color:rgba(255,255,255,.6);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: rgba(255,138,61,.7);
}
.el-select-dropdown__item.selected{
  color:rgba(255,255,255,.6);
}
.el-table__body tr.current-row > td{
  background-color: rgba(255,138,61,.7);
}

#data-table-large{
  .el-select__tags{
    .el-tag--info{
      background-color: #27869e;
      border-color: #27869e;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
      margin-left: 4px;
    }
    .el-tag__close{
      color: rgba(255, 255, 255, 0.8);
    }
  }
  .table-container{
    .vxe-grid{
      .vxe-header--column{
        line-height: 18px;
      }
      .vxe-table--header-wrapper{
        color:$fontColorLimit;
        background: rgba(23, 128, 154, 0.8);
        .vxe-table--header-border-line{
          border-bottom: 1px solid #e8eaec5e;
        }
        .vxe-cell--title{

        }
      }
      .vxe-table--body-wrapper{
        color:$fontColorLimit;
        background: rgba(23, 128, 154, 0);
        .vxe-body--row.row--stripe{
        }
        .vxe-body--row{
          background: rgba(23, 128, 154, 0);
        }
        .vxe-body--row.row--hover{
          background-color: $colorBackgroundActive;
          color:$fontColorLimit;
        }
      }
      .vxe-body--row.row--current{
        background-color: $colorBackgroundActive;
        color:$fontColorLimit;
      }
      .vxe-table.border--full .vxe-body--column, .vxe-table.border--full .vxe-footer--column, .vxe-table.border--full .vxe-header--column{
        background-image: -webkit-gradient(linear,left top,left bottom,from(#fbfdfd30),to(#fbfdfd30)),-webkit-gradient(linear,left top,left bottom,from(#fbfdfd30),to(#fbfdfd30));
        background-image: linear-gradient(#fbfdfd30,#fbfdfd30),linear-gradient(#fbfdfd30,#fbfdfd30);
      }
      .vxe-table--border-line{
        border: 1px solid #fbfdfd30;
      }
    }
  }
}
.idenNumSelectPopper{
    .el-select-dropdown__item.selected::after{
        right: 8px!important;
    }
}
</style>
